<template>
    <el-dialog destroy-on-close :show-close="false" width="600px" v-model="visible" :title="title">
        <div class="el-content">
            <!-- 人事 start -->
            <!-- 安排面试  OA_PLAN_INTERVIEW-->
            <plan-interview-form ref="form" :selectTime="selectedTime" :editId="eventId" v-if="code == 'OA_PLAN_INTERVIEW'"></plan-interview-form>
            <!-- 员工合同  OA_CONTRACT-->
            <Contract ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_CONTRACT'"></Contract>
            <!-- 离职申请 OA_APPLY_QUIT -->
            <dimission-apply-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_APPLY_QUIT'"></dimission-apply-form>
            <!-- 初筛 OA_INITIAL_SIFT -->
            <initial-sift-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_INITIAL_SIFT'"></initial-sift-form>
            <!-- 面试评价 OA_INTERVIEW_EVALUATE-->
            <appraise-interview-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_INTERVIEW_EVALUATE'"></appraise-interview-form>
            <!-- 笔试记录 OA_EXAM_RECORD -->
            <exam-record-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_EXAM_RECORD'"></exam-record-form>
            <!-- 候选人offer前沟通  OA_OFFER_INTERACT-->
            <interact-pre-offer-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_OFFER_INTERACT'"></interact-pre-offer-form>
            <!-- 新建offer OA_NEW_OFFER-->
            <create-offer-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_NEW_OFFER'"></create-offer-form>
            <!-- 候选人被淘汰 OA_BE_OBSOLETE-->
            <obsolete-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_BE_OBSOLETE'"></obsolete-form>
            <!-- 放弃入职 OA_GIVE_UP_ENTRY-->
            <give-up-entry-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_GIVE_UP_ENTRY'"></give-up-entry-form>
            <!-- 转正 OA_OFFICIAL-->
            <to-offcial-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_OFFICIAL'"></to-offcial-form>
            <!-- 员工培训记录 OA_TRAIN_RECORD -->
            <train-record ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_TRAIN_RECORD'"></train-record>
            <!-- 员工异动 OA_POSITION_CHANGE-->
            <reshuffle ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_POSITION_CHANGE'"></reshuffle>
            <!-- 奖惩 OA_BONUS_PENALTY-->
            <bonus-penalty ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'OA_BONUS_PENALTY'"></bonus-penalty>
            <!-- 人事 end -->

            <!-- 行动 start -->
            <!-- 1. 极简事项  MINIMALISM -->
            <minimalism-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'MINIMALISM'" :enterpriseUsers="enterpriseUsers" :code="code" :remind-times="remindTimes"></minimalism-form>
            <!-- 2. 沟通与联系 COMMUNICATION -->
            <communication-form ref="form" :selectTime="selectedTime" :editId="eventId"  v-else-if="code == 'COMMUNICATION'" :code="code" :enterpriseUsers="enterpriseUsers"></communication-form>
            <!-- 3. 来访接待 VISIT_RECEPTION -->
            <visit-reception-form ref="form" :selectTime="selectedTime" :editId="eventId"  v-else-if="code == 'VISIT_RECEPTION'" :code="code" :enterpriseUsers="enterpriseUsers" :remind-times="remindTimes"></visit-reception-form>
            <!-- 4. 询价 ENQUIRY_PRICE -->
            <enquiry-price-form ref="form" :selectTime="selectedTime" :editId="eventId"  v-else-if="code == 'ENQUIRY_PRICE'" :code="code"></enquiry-price-form>
            <!-- 5. 工作联系函 WORK_CONTACT_LETTER -->
            <work-contact-letter-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'WORK_CONTACT_LETTER'" :code="code"></work-contact-letter-form>
            <!-- 行动 end -->

            <!-- 协作 start -->
            <!-- 1. 填表 FILL_IN_FORM-->
            <fill-in-forms ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'FILL_IN_FORM'" :code="code" :enterpriseUsers="enterpriseUsers"></fill-in-forms>
            <!-- 2. 网聊会议 -->
            <online-meeting-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'NETWORK_MEETING'" :code="code" :enterpriseUsers="enterpriseUsers" :remind-times="remindTimes"></online-meeting-form>
            <!-- 协作 end -->

            <!-- 方案 start -->
            <!-- 1. 方案  SCHEME-->
            <scheme-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'SCHEME'" :code="code" :enterpriseUsers="enterpriseUsers" :remind-times="remindTimes"></scheme-form>
            <!-- 2. 美工/设计 ART_DESIGNER-->
            <graphic-designer-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'ART_DESIGNER'" :code="code" :enterpriseUsers="enterpriseUsers" :remindTimes="remindTimes"></graphic-designer-form>
            <!-- 方案 end -->

            <!-- 交易记录 start -->
            <!-- 1. 报价单 QUOTATION_ORDER -->
            <quotation-order-form ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'QUOTATION_ORDER'" :code="code"></quotation-order-form>
            <!-- 交易记录 end -->

            <!-- 钱 start -->
            <!-- 开票申请 -->
            <invoice-dispatch ref="form" :selectTime="selectedTime" :editId="eventId" v-else-if="code == 'INVOICE_DISPATCH'"/>
            <!-- 钱 end -->

            <!--渲染执行流程-->
            <template v-if="hasProcess">
                <el-divider content-position="left">流程</el-divider>
                <process-render ref="processRef" :dept-id="userDeptId" v-model="processUsers" :forms="eventForm" :formData="formData" :process="process" :read-only="readOnly"/>
            </template>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button size="default" @click="close">取消</el-button>
                <el-button  v-if="code != 'QUOTATION_ORDER'" @click="submit" type="primary" size="default">确认</el-button>
                <el-button v-if="code == 'QUOTATION_ORDER'" @click="submit(0)" type="primary" size="default">保存到报价单</el-button>
                <el-button v-if="code == 'QUOTATION_ORDER'" @click="submit(1)" type="primary" size="default">保存并提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { Close, CloseOne, TagOne, Calendar, LocalTwo, Square, CheckCorrect, Peoples, Platte, Ring } from '@icon-park/vue-next';
import { reactive, toRefs, watch, ref, nextTick, onMounted, getCurrentInstance, computed, onUnmounted } from 'vue'
import SelectItem from '../SelectItem/index.vue'
import DatePicker from '../DatePicker/index.vue'
import RadioItem from '../RadioItem/index.vue'
import { defaultConfig } from '../lib/config';
import { useCalendarConfig } from '/@/stores/calendar';
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia';
import { ElMessage } from 'element-plus'
// 执行流程组件
import ProcessRender from '/@/views/setting/workflow/process/ProcessRender.vue'

/**
 * @人事
 */
import PlanInterviewForm from '/@/views/matter/components/PlanInterviewForm.vue'// 安排面试
import Contract from "/@/views/matter/oa/staff/Contract.vue"; // 员工合同
import DimissionApplyForm from '/@/views/matter/components/DimissionApplyForm.vue' // 离职申请
import InitialSiftForm from "/@/views/matter/components/InitialSiftForm.vue"; // 初筛
import AppraiseInterviewForm from '/@/views/matter/components/AppraiseInterviewForm.vue' // 面试评价
import ExamRecordForm from '/@/views/matter/components/ExamRecordForm.vue' // 笔试记录
import InteractPreOfferForm from "/@/views/matter/components/InteractPreOfferForm.vue";  // offer 前沟通
import CreateOfferForm from '/@/views/matter/components/CreateOfferForm.vue' // 新建offer
import ObsoleteForm from '/@/views/matter/components/ObsoleteForm.vue' // 候选人被淘汰
import GiveUpEntryForm from '/@/views/matter/components/GiveUpEntryForm.vue' // 放弃入职
import ToOffcialForm from '/@/views/matter/components/ToOffcialForm.vue' // 转正
import TrainRecord from "/@/views/matter/oa/staff/TrainRecord.vue"; // 员工培训记录
import Reshuffle from "/@/views/matter/oa/staff/Reshuffle.vue"; // 员工异动
import BonusPenalty from "/@/views/matter/oa/staff/BonusPenalty.vue"; // 奖惩

/**
 * @行动
 */
import MinimalismForm from '/@/views/matter/components/MinimalismForm.vue'; // 极简事项
import CommunicationForm from '/@/views/matter/components/CommunicationForm.vue'; // 沟通与联系
import VisitReceptionForm from '/@/views/matter/components/VisitReceptionForm.vue' // 来访接待
import EnquiryPriceForm from '/@/views/matter/components/EnquiryPriceForm.vue' // 询价
import WorkContactLetterForm from '/@/views/matter/components/WorkContactLetterForm.vue' // 工作联系函

import { getEnterpriseUsers } from '/@/api/sys/user'
import { getRemindTimes } from '/@/api/matter'
import { homeApi } from '/@/api/home/index'

/**
 * @协作
 */
import FillInForms from '/@/views/matter/components/FillInForms.vue' // 填表
import OnlineMeetingForm from '/@/views/matter/components/OnlineMeetingForm.vue' // 网聊会议

/**
 * @方案
 */
import SchemeForm from '/@/views/matter/components/SchemeForm.vue' // 方案
import GraphicDesignerForm from '/@/views/matter/components/GraphicDesignerForm.vue' // 美工/设计

/**
 * @交易记录
 */
import QuotationOrderForm from '/@/views/matter/components/QuotationOrderForm.vue' // 报价单

/**
 * @钱
 */
import InvoiceDispatch from '/@/views/matter/money/InvoiceDispatch.vue'   // 开票申请

export default {
    name: 'EventForm',
    props: {
        dialogEventFormVisible: {
            type: Boolean,
            default: false
        },
        code: { // 所选的事项的code
            type: String,
            default: null
        },
        title: { // 事项标题
            type: String,
            default: '创建事件'
        },
        itemId: { // 事项id
            type: String,
            default: null
        },
        eventId: { // 编辑的事项Id
            type: String,
            default: null
        },
        readOnly: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Ring,
        Close,
        TagOne,
        Square,
        Platte,
        Peoples,
        Calendar,
        CloseOne,
        LocalTwo,
        CheckCorrect,
        // 组件
        SelectItem,
        DatePicker,
        RadioItem,
        ProcessRender,
        // 各种表单
        DimissionApplyForm,
        PlanInterviewForm,
        Contract,
        MinimalismForm,
        InitialSiftForm,
        AppraiseInterviewForm,
        ExamRecordForm,
        InteractPreOfferForm,
        CreateOfferForm,
        ObsoleteForm,
        GiveUpEntryForm,
        ToOffcialForm,
        TrainRecord,
        Reshuffle,
        BonusPenalty,
        CommunicationForm,
        VisitReceptionForm,
        EnquiryPriceForm,
        WorkContactLetterForm,
        FillInForms,
        OnlineMeetingForm,
        SchemeForm,
        GraphicDesignerForm,
        QuotationOrderForm,
        InvoiceDispatch
    },
    emits: ['closeForm'],
    setup(props, context) {
		const { proxy } = getCurrentInstance()
        const { dialogEventFormVisible, code, eventId } = toRefs(props)
        let visible = ref(dialogEventFormVisible.value)
        const homeCalendar = homeApi()
        const storesCalendarConfig = useCalendarConfig();
        const storesWorkFlowConfig = useWorkFlowConfig(); // 工作流数据
        const workFlowConfig = storeToRefs(storesWorkFlowConfig)
        const processRef = ref()

        const state = reactive({
            eventCodes: [], // 表单code合集
            enterpriseUsers: [],
            remindTimes: [],
            selectedTime: '', // 日历上选择的时间
            eventForm: {},
            userDeptId: null,
            processUsers: {},
            formData: {},
            hasProcess: true
        })
        // 获取表单组件
        const form = ref(null)
        // 需要获取matter数据的表单
        const matter = ['MINIMALISM', 'VISIT_RECEPTION', 'COMMUNICATION', 'FILL_IN_FORM', 'NETWORK_MEETING', 'SCHEME', 'ART_DESIGNER']
        const process = computed(() => {
            return workFlowConfig.design.value.process
        })
        watch(() => dialogEventFormVisible.value,
            (oldVal, newVal) => {
                visible.value = newVal || oldVal
                if(newVal || oldVal){
                //    console.log(form)
                    if(eventId.value){
                        getFormInfo()
                    }
                }else{
                    context.emit("update:scrollDisabled", false);
                }
            }
        )
        watch(() => code.value,
            val => {
                if(matter.includes(val)) {
                    getMatterData()
                }
            }
        )
        const getEventStore = computed(() => {
            const { eventForm } = storeToRefs(storesCalendarConfig)
            return eventForm.value
        })
        // 关闭表单
        const close = () => {
            // form.value.reset()
            visible.value = false
            if(eventId.value){
                storesCalendarConfig.setEventForm({})
            }
            context.emit('closeForm', true)
        }
        const submit = (type) => {
            form.value.submit(type).then(async (e) => {
                if(e == 'edit'){
                    const res = await homeCalendar.modifyMatter(getEventStore.value)
                    if(res.code == 0){
                        // 编辑
                        proxy.mittBus.emit('submitEventForm')
                        visible.value = false
                        ElMessage.success('编辑成功')
                        close()
                    }
                }else{
                    // 创建
                    proxy.mittBus.emit('submitEventForm')
                    visible.value = false
                    close()
                }
            })
        }

        // matter 数据部分的
        const getMatterData = () => {
            getEnterpriseUsers().then(res => state.enterpriseUsers = res.data).catch(e => console.log(e))
            getRemindTimes().then(res => state.remindTimes = res.data).catch(e => console.log(e))
        }

        // 获取编辑的数据
        // 暂时的想法是直接在这个页面获取数据，传到组件里面，或者放在store里面，在组件里面获取数据；提交编辑也在这个页面提交；组件内用edit的方法抛出来；
        // 获取表单详情
        const getFormInfo = () => {
            homeCalendar.getInfo({id: eventId.value}).then(res => {
                const data = res.data
                state.eventForm = data
                storesCalendarConfig.setEventForm(data)
            })
        }

        onMounted(() => {
            // 监听当前日历选择的时间
            proxy.mittBus.on('setCurrentClickTime', e => {
                state.selectedTime = e
            })
        })
        return {
            ...toRefs(state),
            submit,
            visible,
            close,
            form,
            getFormInfo,
            process,
            processRef
        }
    }
}
</script>

<style scoped lang="scss">
.event-form-box{
    .closebg{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1001;
        background: rgba(0,0,0,.12);
    }
    .event-form{
        background: #fff;
        padding: 12px 0;
        position: absolute;
        z-index: 1002;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        width: 600px;
        border-radius: 4px;
        box-sizing: border-box;
        .form-header{
            font-size: 15px;
            color: #333;
            border-bottom: 1px solid var(--ss-color-primary-deep);
            padding: 0 12px 10px;
        }
        .close-btn{
            position: absolute;
            top: 12px;
            right: 10px;
            cursor: pointer;
        }
        .form-content{
            padding: 12px 20px 0;
            .form-cell{
                display: flex;
                align-items: stretch;
                margin-bottom: 14px;
                &:last-child{
                    margin-bottom: 0;
                }
            }
            .form-label{
                font-size: 13px;
                width: 50px;
                margin-right: 5px;
                display: inline-flex;
                align-items: flex-start;
                color: var(--ss-color-gery1);
                :deep(.i-icon){
                    line-height: 10px;
                    margin-top: 2px;
                    margin-right: 4px;
                }
            }
            .form-right{
                flex: 1;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                input{
                    display: block;
                    flex: 1;
                    overflow: hidden;
                    padding-right: 20px;
                }
                .clear-btn{
                    cursor: pointer;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
                .time-picker{
                    flex: 1;
                    display: flex;
                    align-items: flex-start;
                    .unit{
                        font-size: 14px;
                        display: block;
                        margin: 0 10px;
                        color: var(--ss-color-text-gery);
                    }
                    .picker-time-cell{
                        flex: 1;
                    }
                }
                .check-box{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    margin-left: 10px;
                    cursor: pointer;
                    :deep(.i-icon){
                        line-height: 10px;
                        margin-right: 4px;
                    }
                    .check-name{
                        font-size: 13px;
                        cursor: pointer;
                    }
                }
            }
            // .form-special{
            //     padding-bottom: 5px;
            // }
            .form-border{
                padding-bottom: 5px;
                border-bottom: 1px solid var(--ss-color-primary-light);
            }
            .form-footer{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                padding: 10px 0 0;
                .btn{
                    border-radius: 4px;
                    padding: 6px 20px;
                    margin-right: 10px;
                    cursor: pointer;
                    box-sizing: border-box;
                    transition: .1s;
                    &:last-child{
                        margin-right: 0;
                    }
                }
                .cancel{
                    background: var(--ss-color-primary-light);
                    color: var(--ss-color-primary);
                }
                .submit{
                    background: var(--ss-color-primary);
                    color: var(--ss-color-primary-light);
                }
            }
        }
    }
}
</style>
